﻿<html>
<head>
	<title>MoteJS Surfaces Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="lib/html.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="mote.js"></script>
	<script type="text/javascript">
		$(function(){
			$("h1").after(Html.div({style:"font-style:italic; color:#ccc;"}, "Powered by MoteJS v.", Mote.version));
			
			var Vector = Mote.Vector;
			
			var world = Mote.world($("#screen"), function(world, screen){
				var ground = world.gravity.groundPosition;
				var width = screen.width;
				screen.rect(0, 0, screen.width, ground).attr({fill:"90-#eef-#cde", "stroke-width":0});
				screen.rect(0, ground, screen.width, screen.height-ground).attr({fill:"90-#8a4-#aba", "stroke-width":0});
				screen.path(["M0,",ground,"L",width,",",ground]);
			});
			world.trace.collisions = true;
			
			
			var sol1 = Mote.solid(world, [125, 200], {
				mass: 50,
				static: true,
				draggable: false,
				template: function(screen){
					var size = 90;
					return screen.set(
						screen.rect(0, 0, size, size).attr({fill:"#ccc", stroke:"#888"}),
						screen.text(40, 45, this.id)
					);
				}
			});
			
			var sol2 = Mote.solid(world, [325, 200], {
				mass: 50,
				static: true,
				draggable: false,
				size: 80,
				template: function(screen){
					return screen.set(
						screen.circle(this.size, this.size, this.size).attr({fill:"#ccc", stroke:"#888"}),
						screen.text(40, 45, this.id)
					);
				},
				surface: {sphere:80}
			});
			
			Mote.solid(world, [380, 100], {
				template: function(screen){
					return screen.set(
						screen.circle(10, 10, 10).attr({fill:"r(.3,.4)#ffe-#886", "stroke-width":0}),
						screen.text(10, 10, this.id)
					);
				},
				surface: {sphere:10}
			});
		});
	</script>
</head>
<body>
	<h1>MoteJS Surfaces Demo Page</h1>
	<div id="screen" style="border:1px solid #ccc; margin:5px; width:900px; height:500px;"></div>
</body>
</html>